<template>
  <el-card class="all">
    <div class="prompt">
      <p>模块为你提供帐户信息相关内容，你在该模块可以修改已有的帐户信息。</p>
    </div>
    <div class="from" ref="EditorUserForms">
      <div class="message"><label>用户名</label><input type="text" disabled readonly="readonly" v-model="userInfo.userCode" /></div>
      <div class="message"><label>绑定邮箱</label><input type="email" v-model="userInfo.mail"/></div>
      <div class="message"><label>绑定电话</label><input type="text" v-model="userInfo.mobilePhone"/></div>
      <div class="message imgbox">
        <label>用户头像</label>
        <div id="file"  @click="defaultImgBox" >
          <div class="head_img" >
            <img v-if="headImgSrc" :src="headImgSrc"/>
            <img v-else src="../../static/img/head0.jpg"/>
          </div>
        </div>
        <div class="defaultImg" v-show="defaultImg"  >
          <p>系统头像</p>
          <img v-for="item in headPortrait "  :src="item.img" alt="" :key="item.id" @click="showListImg(item)">
          <a @click="uploadHeadImg">自定义头像...</a>
          <input id="saveImage" type="file" accept="image/png,image/jpeg" name="file" @change="handleFile" class="hiddenInput" />
        </div>
      </div>
    </div>
    <button class="btn" @click="amend">保存</button>
  </el-card>
</template>
<script>
  export default {
    name: "SelfConfig",
    data(){
      return {
        defaultImg:false,
        userInfo:{},
        headImgSrc:"",
        emailAddr:'',
        headPortrait:[
          {img:require('../../static/img/head1.png'),id:1},
          {img:require('../../static/img/head2.png'),id:2},
          {img:require('../../static/img/head3.png'),id:3},
          {img:require('../../static/img/head4.png'),id:4},
          {img:require('../../static/img/head5.png'),id:5},
          {img:require('../../static/img/head6.png'),id:6},
          {img:require('../../static/img/head7.png'),id:7},
          {img:require('../../static/img/head8.png'),id:8},
        ]
      }
    },
    created(){
      this.userInfoo()
    },
    methods:{
      // 获取用户信息
      userInfoo(){
        // debugger
        this.$axios.post('/joys-rest/joys-master-data/users/findUserByCode/admin').then(res=>{
          console.log(res)
          this.userInfo = res.data
          this.loadThumb()
        })
      },
      // 改变地址图片
      showListImg(e){
        this.headImgSrc = e.img;
        console.log(this.headImgSrc)
        this.userInfo.headImgId = e.id        
      },
      // 点击弹出上传图片盒子
      defaultImgBox(){
        this.defaultImg =  !this.defaultImg;
      },
      // 点击选择上传图片方法
      uploadHeadImg() {
        this.defaultImg = true
        this.$el.querySelector('.hiddenInput').click()
      },
      // 文件储存方法
      handleFile(e){
          let x = document.getElementById('saveImage').files[0];
          console.log(x,"ddd");
              // this.userInfo.headImgSrc = ""
          
          // this.userInfo.headImgSrc = thumbnail
          let params = new FormData() ; //创建一个form对象
          params.append('file',x,x.name);  //append 向form表单添加数据
          params.append('dirName','/user')
          params.append('one2one',true)
          params.append('overwrite',true)
          params.append('sourceId',this.userInfo.userId)
          //添加请求头  通过form添加的图片和文件的格式必须是multipart/form-data
          let config = {
            headers:{
              'Content-Type': 'multipart/form-data',
              'AUTH-TOKEN': localStorage.getItem('AUTH-TOKEN'),
              'Accept': 'application/json',}
          };
          console.log(params,"你是什么")
          // debugger
          this.$axios.post("/joys-rest/joys-file/file/upload",params,config)
            .then((res) => {
              console.log(res.data,"成功了");
              this.userInfo.headImgId = res.data.fileId
              this.headImgSrc = res.data.thumbnail
              this.defaultImg =  !this.defaultImg;
            })
            .catch( (error) => {
              console.log(error,"失败了");
            })
      },
      // 图片下载
      loadThumb(){





          // let config = {
          //   headers:{
          //     'Content-Type': 'multipart/form-data',
          //     'AUTH-TOKEN': localStorage.getItem('AUTH-TOKEN'),
          //     'Accept': 'application/json',}
          // };
      //     getImageUrl(fileId) {
      //   if (fileId) {
      //     return '/joys-rest/joys-file/file/browse/' + fileId + '?AUTH-TOKEN=' + localStorage.getItem('AUTH-TOKEN')
      //   }
      //   return null
      // },
          
          console.log(this.userInfo.headImgId,'文件代码')
        // this.$axios.post('/joys-rest/joys-file/file/browse/' + this.userInfo.headImgId ,config)
        
        
        
        this.$axios({
  				method: 'get',
  				url: '/joys-rest/joys-file/file/browse/'+this.userInfo.headImgId,
  				headers:{
  					  // 'Content-Type': 'multipart/form-data',
              'AUTH-TOKEN': localStorage.getItem('AUTH-TOKEN'),
              // 'Accept': 'application/json',
           },
  			}).then((res)=>{
          console.log(res,"返回图片")
          console.log(res.data)
          this.headImgSrc = resp.data
        }).catch(error=>{
          this.$message.error('获取图片失败')
        })
      },
      //点击保存
      amend(){
        let config = {
            headers:{
              'Content-Type': 'application/json',
              'AUTH-TOKEN': localStorage.getItem('AUTH-TOKEN'),
              'Accept': 'application/json',}
          };
          console.log(this.userInfo,"gggggg")
        this.$axios.post('/joys-rest/joys-master-data/users/saveUser',this.userInfo,config).then((res)=>{
          console.log(res);
          this.userInfo.headImgSrc = ""
          this.$message({
            message:'修改成功'
          })
        }).catch(error=>{
          this.$message.error('修改失败,请稍后重试')
        })
      },
    }
  }
</script>

<style scoped>
  *{
    margin:0;
    padding:0;
    outline: none;
  }
  .all{
    position: relative;
  }
  .prompt{
    width:100%;
    background: #E4E8EB;
    padding:16px 0;
    text-align: left;
    position:absolute;
    top:0;
    left:0;
  }
  .prompt p{
    font-family: PingFangSC-Medium;
    font-size: 12px;
    color: #555555;
    line-height: 16px;
    margin-left:20px;
  }
  .from{
    margin-top:96px;
    margin-left:100px;
  }
  .from .message {
    margin-bottom:28px;
  }
  .from .message label{
    display: inline-block;
    width:112px;
    height:16px;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #001616;
    letter-spacing: 0;
    text-align: right;
    line-height: 16px;
    text-align: right;
  }
  .from .message input{
    
    width:248px;
    height:32px;
    background: #FFFFFF;
    border: 1px solid #E0E7E9;
    border-radius: 2px;
    margin-left:16px;
    padding-left: 8px;
  }
  .from .defaultImg{
    display: inline-block;
    width: 212px;
    height: 144px;
    background: #F4F8F9;
    border: 1px solid #E0E7E9;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.09);
    border-radius: 2px;
    position: relative;
    top: -120px;
    left: 252px;
    padding: 8px  15px 13px 8px;

  }
  .from .defaultImg p{
    opacity: 0.2;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #001616;
    text-align: left;
    line-height: 14px;
    display: block;
    padding-left: 15px;
  }
  .from .defaultImg a{
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #001616;
    text-align: left;
    line-height: 14px;
    display: block;
    margin-top: 8px;
    cursor:pointer;    
    padding-left: 15px;
    
  }
  .from .defaultImg a:hover{
    color: #0D59B0;
    /* text-shadow: 1px 1px 1px  #001616; */
    /* font-weight: 700; */
  }
  .from .imgbox {
    height: 142px;
    margin-bottom: 0px;
  }
  .from .defaultImg img{
    margin-top: 8px;
    margin-left: 11px;
    width: 34px;
    height: 34px;
  }
  /* .from .defaultImg img:nth-child(1){
    padding-right: 0px;
  }
  .from .defaultImg img:nth-child(4n-3){
    padding-right: 0px;

  } */
  #file{
    width:120px;
    height:120px;
    border:1px solid #E0E7E9;
    margin:-22px 0 0 130px;
    position:relative;
  }
  .head_img{
    height: 96px;
    width:96px;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    opacity: 0.8;
    /* background-color: #000; */
  }
  .head_img img{
    width:100%;
    height:100%;
  }
  .hiddenInput{
    display: none;
  }
  .hiddenInput::after{
    content: "";
    display: block;

  }
  .btn{
    width:44px;
    height:28px;
    color:#fff;
    background:#001616;
    text-align: center;
    line-height: 28px;
    border:none;
    border-radius: 2px;
    margin: 13px 0 53px 230px;
    cursor:pointer;
  }
</style>
